<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn{
            display: inline-block;
            width: 60px;
            height: 22px;
            vertical-align: middle;
            background-color: lightseagreen;
            /* border: none; */
            font-size: 16px;
            text-align: center;
            line-height: 22px;
            color: #ccc;
        }
    </style>
</head>
<body>

    <!-- ## 2.验证码匹配的问题 -->

    用户名：<input type="text">
    密码:<input type="password">
    验证码：<input type="text" id="txt">
    <span id="btn"></span>
    <button id="anNiu">提交</button>

    <script src="utils.js"></script>
    <script>
        btn.innerHTML = randomNum(1000, 9999)

        btn.onclick = function(){
            btn.innerHTML = randomNum(1000, 9999)
        }

        anNiu.onclick = function(){
            if(txt.value == btn.innerHTML){
                alert('welcome')
                btn.innerHTML = randomNum(1000, 9999)
                txt.value = ''
            }else{
                alert('验证码错误，请重新输入')
                btn.innerHTML = randomNum(1000, 9999)
                txt.value = ''
            }
        }
    </script>
</body>
</html>